<template>
	<div class="common_tabs_container">
		<el-tabs type="card" class="custom_top" v-model="activeName">
			<el-tab-pane label="PDF转化" name="1"></el-tab-pane>
			<el-tab-pane label="音频转化" name="3"></el-tab-pane>
		</el-tabs>
		<sw-common-frame :loading="loading">
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="文件名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.isFinish" clearable placeholder="选择转码状态" style="width: 136px">
						<el-option label="已完成" value="1"></el-option>
						<el-option label="进行中" value="2"></el-option>
						<el-option label="转码失败" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table slot="table" size="medium" :data="tableData" height="100%">
				<el-table-column prop="name" label="文件名称" min-width="240"></el-table-column>
				<el-table-column label="转码状态" width="120" :formatter="returnTaskStatus"></el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="100"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="80">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleLookParams(row)">转码参数</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
			<el-dialog title="转码参数" :visible.sync="dialogVisible" width="720px">
				<json-viewer class="transcode_params_viewer" :value="transcodeParams" preview-mode copyable>
					<template slot="copy" slot-scope="{ copied }">
						{{ !copied ? '复制' : '已复制' }}
					</template>
				</json-viewer>
			</el-dialog>
		</sw-common-frame>
	</div>
</template>

<script>
import jsonViewer from 'vue-json-viewer';
import listMixins from '@/mixins/listMixins';
import { getTaskListData } from '@/api/task/tbSysMqRecord';
export default {
	mixins: [listMixins],
	components: { jsonViewer },
	data() {
		return {
			activeName: '1',
			dialogVisible: false,
			taskData: {}
		};
	},
	computed: {
		listFunction() {
			return eval(getTaskListData);
		},
		requestParams() {
			return { ...this.queryData, type: this.activeName };
		},
		transcodeParams() {
			if (!!this.taskData.mqData && this.$isJSON(this.taskData.mqData)) {
				return JSON.parse(this.taskData.mqData);
			} else {
				return {};
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//格式化任务状态
		returnTaskStatus(data) {
			let text = '';
			let attrs = { size: 'medium' };
			if (data.isFinish === '1') {
				text = '已完成';
				attrs['type'] = 'success';
			} else if (data.isFinish === '2') {
				text = '进行中';
				attrs['type'] = 'warning';
			} else if (data.isFinish === '3') {
				text = '转码失败';
				attrs['type'] = 'danger';
			}
			return this.$createElement('ElTag', { attrs }, text);
		},

		//查看任务参数
		handleLookParams(data) {
			this.dialogVisible = true;
			this.taskData = { ...data };
		}
	}
};
</script>

<style lang="scss" scoped>
.transcode_params_viewer::v-deep {
	width: 100%;
	.jv-tooltip.right {
		right: 0;
	}
	.jv-button {
		padding: 0;
	}
	.jv-code {
		line-height: 24px;
		padding: 0;
	}
	.jv-key {
		color: #606266;
	}
}
</style>
